<style lang="less" scoped>
.logo-img {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-right: 10px;
    cursor: pointer;
    img {
        max-width: 100%;
        max-height: 100%;
    }
    span {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.6);
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 10px;
    }
    input {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
    }
    &:hover {
        span {
            display: flex;
        }
    }
}
.icon-tip {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}
</style>
<template>
    <div class="page-setting">
        <div class="crumbs">
            <router-link to="/">首页</router-link> / <span>系统设置</span> /
            <span class="active">首页设置</span>
        </div>
        <el-container :style="{ height: mainH + 'px' }">
            <el-main class="census-main">
                <div class="opers flex v-c" style="justify-content: flex-end">
                    <el-button
                        size="big"
                        type="green"
                        @click="saveAction"
                        :disabled="!$store.getters.hasEditPermission"
                        >保存</el-button
                    >
                    <el-button
                        size="big"
                        type="blue"
                        @click="recoverAction"
                        :disabled="!$store.getters.hasEditPermission"
                        >恢复</el-button
                    >
                </div>
                <el-table
                    :data="dataList"
                    style="width: 100%"
                    :max-height="mainH - 120"
                    v-loading="loading"
                >
                    <el-table-column type="index" label="序号" width="90"></el-table-column>
                    <el-table-column prop="subtitleName" label="小标题">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.subtitleName" style="width:150px;" />
                        </template>
                    </el-table-column>
                    <el-table-column prop="headlineName" label="大标题">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.headlineName" style="width:150px;" />
                        </template>
                    </el-table-column>
                    <el-table-column prop="logo" label="图标">
                        <template slot-scope="scope">
                            <div class="flex" v-if="scope.row.permissionsId !== '000'">
                                <label class="logo-img">
                                    <img :src="scope.row.logo" />
                                    <!-- <span><i class="iconfont icon-upload"></i></span>
									<input type="file" accept=".png" @change="logoChange($event,scope.$index)" /> -->
                                </label>
                                <div>
                                    <el-upload
                                        ref="upload"
                                        class="upload-file"
                                        :action="uploadUrl"
                                        :show-file-list="false"
                                        :limit="1"
                                        :on-success="
                                            (res) => handleUploadSuccess(res, scope.$index)
                                        "
                                        :auto-upload="true"
                                        accept=".png"
                                        name="file"
                                        :data="{ token: siteInfos.token }"
                                    >
                                        <el-button
                                            size="small"
                                            type="blue"
                                            :disabled="!$store.getters.hasEditPermission"
                                            >点击更换</el-button
                                        >
                                    </el-upload>
                                    <span class="icon-tip">推荐尺寸60*60</span>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </el-main>
        </el-container>
    </div>
</template>
<script>
import { mapState } from "vuex"
import utils from "@/assets/js/utils"
export default {
    name: "Notice",
    components: {},
    props: {
        winH: {
            type: Number,
            default: 500,
        },
    },
    data() {
        return {
            loading: false,
            total: 0,
            currentPage: 1,
            pageSize: 10,
            dataList: [],
            orgId: "",

            saving: false,
            uploadUrl: this.config.uploadUrl,
        }
    },
    watch: {},
    computed: {
        mainH() {
            return this.winH - 220
        },
        ...mapState(["siteInfos"]),
        isAdmin() {
            return this.siteInfos && this.siteInfos.userType == 1
        },
    },
    methods: {
        getData(recovery) {
            this.loading = true
            let params = {
                homeId: this.siteInfos.homeId,
            }
            if (recovery) {
                params.recovery = recovery
            }
            this.$get("/systemsetup/systemsetup/getHomePageLayoutList", params).then(
                (res) => {
                    this.loading = false
                    let data = res.data
                    this.dataList = data
                },
                (err) => {
                    this.loading = false
                    if (err.msg) {
                        this.$message.error(err.msg)
                    }
                }
            )
        },
        saveAction() {
            this.$post("/systemsetup/systemsetup/setHomePageLayoutList", {
                item: this.dataList,
            }).then(
                (res) => {
                    this.$message.success("保存成功")
                },
                (err) => {
                    this.$message.error(err.msg || "系统错误")
                }
            )
        },
        recoverAction() {
            this.getData(true)
        },
        handleUploadSuccess(res, index) {
            if (res.code == 0) {
                // this.$message.success('上传成功')
                this.dataList[index].logo = res.data.filePath
            } else {
                this.$message.error(res.msg)
            }
        },
        logoChange(e, index) {
            let file = e.target.files[0]
        },
    },
    created() {
        this.getData()
    },
    activated() {},
    mounted() {},
}
</script>
